<template>
    <div>
       <Row class="bench_search">
            <Col span="4">
              <span>区县：</span>
              <Select v-model="searchInfo.level1" filterable transfer="" @on-change="getMailList(searchInfo.level1,1,null)" style="width: 70%;">
                <Option :value="item.id" v-for="item in mailList[0]" v-bind:key="item.id">{{item.title}}</Option>
              </Select>
            </Col>
            <Col span="4" >
              <span>街道：</span>
              <Select v-model="searchInfo.level2" filterable transfer="" @on-change="getMailList(searchInfo.level2,2,null)" style="width: 70%;">
                <Option :value="item.id" v-for="item in mailList[1]" v-bind:key="item.id">{{item.title}}</Option>
              </Select>
            </Col>
            <Col span="4" >
              <span>社区：</span>
              <Select v-model="searchInfo.level3" filterable transfer="" style="width: 70%;">
                <Option :value="item.id" v-for="item in mailList[2]" v-bind:key="item.id">{{item.title}}</Option>
              </Select>
            </Col>
            <Col span="6">
              <span>时间范围：</span>
              <DatePicker type="datetimerange" format="yyyy-MM-dd" transfer="" style="width: 70%"
                          placement="bottom-end" v-model="searchInfo.applytime1"></DatePicker>
            </Col>
            <Col span="2" class="marginR2" style="float:right" pull="1">
              <Button class="new-btn-sty" @click="init"><Icon type="ios-search" /> 查询</Button>
            </Col>
            </Row>
            <Row>
              <Col span="6" style="margin-bottom:10px">
              <span>事项名称：</span>
                <Input placeholder="事项名称" class="search-input" v-model="searchInfo.item_name" style="width: 70%;"/>
              </Col>
            </Row>
            <!-- <Row class="bench_search">
            <Col span="6" >
              <span>事项类型：</span>
              <Select v-model="searchInfo.item_type" filterable transfer="" style="width: 70%;" @on-change="changeItem1(searchInfo.item_type)">
                <Option :value="item.id" v-for="item in treelist" v-bind:key="item.id">{{item.type_name}}</Option>
              </Select>
            </Col>
            <Col span="6">
              <span>事项名称：</span>
              <Select v-model="searchInfo.item_id" filterable transfer="" style="width: 70%;">
                <Option :value="item.id" v-for="item in eventListSQ" v-bind:key="item.id">{{item.text}}</Option>
              </Select>
            </Col>
          </Row> -->
      <Table border :columns="columns1" :data="datalist"></Table>
      <Page class="page_style" :total="totalnum" :current="currentPageNo"
            :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    </div>
</template>

<script>
import { findLogAmlList, getMailLevelList, treelist, eventlist, date2str } from '@/api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      columns1: [
        { title: '姓名', width: 100, key: 'name' },
        { title: '身份证', width: 200, key: 'card_no' },
        { title: '手机号', width: 150, key: 'mobile' },
        { title: '事项名称', width: 250, key: 'item_name' },
        { title: '社区名称', width: 250, key: 'company_name' },
        { title: '登录名称', width: 150, key: 'create_byname' },
        { title: '登录账号', width: 150, key: 'create_by' },
        { title: '操作时间', width: 200, key: 'create_time' }
      ],
      datalist: [],
      totalnum: 0,
      currentPageNo: 1,
      currentPageSize: 10,
      mailList: [[], [], []],
      eventListSQ: [],
      eventListSC: [],
      treelist: [],
      applytime1: [],
      searchInfo: {
        level1: 0,
        item_name: ''
      }
    }
  },
  methods: {
    changePageNo (pageSize) {
      console.log(pageSize)
      this.currentPageNo = pageSize
      this.init()
      this.getNowLineNoByloginName()
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    init () {
      let timearray = this.searchInfo.applytime1
      let data = {
        pageNo: this.currentPageNo,
        pageSize: this.currentPageSize,
        item_name: this.searchInfo.item_name,
        start_time: date2str(timearray[0]),
        end_time: date2str(timearray[1]),
        id: this.searchInfo.level3 || this.searchInfo.level2 || this.searchInfo.level1 || ''
      }
      findLogAmlList(data).then(res => {
        console.log(res.data)
        if (res.data.errcode === 0) {
          this.datalist = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          this.loadData = false
          this.getNowLineNoByloginName()
        }
      })
    },
    // 事项类型列表，页面搜索栏使用
    getTreeList () {
      treelist({}).then(res => {
        if (res.data.errcode === 0) {
          this.treelist = res.data.data
          this.treelist.unshift({ id: '', type_name: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询事项类型列表失败' })
        }
      })
    },
    // 事项列表，页面搜索栏使用
    changeItem1 (item_type) {
      let that = this
      that.eventListSQ = []
      that.eventListSC.forEach(function (temp1, index) {
        if (item_type === 0) {
          that.eventListSQ.push(temp1)
        } else {
          if (temp1.org_code === item_type) {
            that.eventListSQ.push(temp1)
          }
        }
      })
      that.eventListSQ.unshift({ id: 0, text: '全部' })
    },
    // 已有事项列表，页面搜索栏使用
    getItemList () {
      eventlist({}).then(res => {
        if (res.data.errcode === 0) {
          this.eventListSC = res.data.data
          this.eventListSC.unshift({ id: 0, text: '全部' })
          this.eventListSQ = this.eventListSC
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询事项劣列表失败' })
        }
      })
    },
    // 社区统计下拉搜索框的级联查询
    getMailList (id, index, company_code) {
      if (id === 0) {
        this.mailList[index] = []
        this.searchInfo['level' + (index + 1)] = ''
        return
      }
      getMailLevelList({ id: id, company_code: company_code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[index] = res.data.data
          this.mailList[index].unshift({ id: 0, title: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.getMailList(null, 0, null)
    // this.getTreeList()
    // this.getItemList()
  }
}
</script>

<style scoped>
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .buttons{
    display: flex;
    margin-left: 10px;
  }
  .bench_search {
    margin-bottom: 10px;
  }
  .marginR2 {
    margin-right: 2%;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
</style>
